<template>
  <div>
    <div class="dataList out-border d-flex justify-content-between layout-top">
      <div class="screen-l">
        <i class="el-icon-tickets"></i>
        <span class="txt">数据列表</span>
      </div>
      <el-button size="mini" @click="() => this.$router.push('/pms/addProduct')">添加</el-button>
    </div>
    <div class="layout-top">
      <el-table :data="pro_Classifys" border="" style="width: 100%">
        <el-table-column prop="id" label="编号" width="90" align="center"> </el-table-column>
        <el-table-column prop="name" label="分类名称" width="180" align="center"> </el-table-column>
        <el-table-column prop="address" label="级别" align="center" width="110">
          <template slot-scope="scope">
            {{ scope.row.level == 0 ? '一级' : '0' }}
          </template>
        </el-table-column>
        <el-table-column prop="productCount" label="商品数量" align="center" width="90"> </el-table-column>
        <el-table-column prop="productUnit" label="数量单位" align="center" width="90"> </el-table-column>
        <el-table-column label="导航栏" align="center" width="90">
          <template slot-scope="scope"><el-switch v-model="scope.row.navStatus" :active-value="1" :inactive-value="0" active-color="#409EFF" inactive-color="#DCDFE6"> </el-switch> </template>
        </el-table-column>
        <el-table-column label="是否显示" align="center" width="90">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.showStatus" :active-value="1" :inactive-value="0" active-color="#409eff" inactive-color="#dcdfe6"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center" width="100"> </el-table-column>
        <el-table-column prop="address" label="设置" align="center">
          <template>
            <div class="d-flex justify-content-center"><el-button size="mini ">查看下级</el-button><el-button size="mini ">转移商品</el-button></div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="jumpEditPage(scope.row.id)">编辑</el-button> <el-button size="mini" type="danger" @click="open(scope.row.id)">删除 </el-button></template
          >
        </el-table-column>
      </el-table>
      <div style="float: right" class="mt-4">
        <div class="block">
          <el-pagination
            :background="true"
            @size-change="getClassifyList"
            @current-change="getClassifyList"
            :current-page="query.pageNum"
            :page-sizes="[5, 10, 15]"
            :page-size.sync="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { fetchClassifyListData } from '@/api/api'
import { removeProductItem } from '@/utils/utils'
export default {
  name: 'ClaaifyProduct',
  data() {
    return {
      pro_Classifys: [],
      total: 0,
      query: { pageNum: 1, pageSize: 5 },
      // 导航状态
      navStatus: 1,
      // 显示状态
      showStatus: 1,
    }
  },
  methods: {
    async getClassifyList() {
      let res = await fetchClassifyListData(this.query)
      let { list, total } = res.data
      this.total = total
      this.currentPage = this.pro_Classifys = list
    },
    // 处理跳转编辑页
    jumpEditPage(id) {
      this.$router.push({ path: `/pms/updateProductCate`, query: { id } })
    },
    open(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          removeProductItem(this.pro_Classifys, id)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
  created() {
    this.getClassifyList()
  },
}
</script>
<style lang="scss" scoped>
.screen-l .txt {
  padding-left: 6px;
}
.dataList {
  padding: 18px 20px;
}
</style>
